<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="static/paging.css">
  <script type="text/javascript" src="static/jquery-1.11.2.js"></script>
  <script type="text/javascript" src="static/paging.js"></script>
</head>

<body>
<div><input id="key" placeholder="输入姓名">
  <button onclick="search()" class="button">提交</button>
</div>
<div id="pageToolbar"></div>
<table id="tables"></table>
<script>
  var page = new Paging();
  //下面是个ajax的例子
  function search() {
    $("#tables").html("");
    $('#pageToolbar').html("");

    var key = $('#key').val();
      var pageResult = {
        "key": key,
        "current": 1,
        "pagesize": 3
      };



    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      dataType:"json",
      url: "http://localhost:8081/page",
      data: JSON.stringify(pageResult),
      success: function (data) {
        if (data.status == "success") {
          alert("登录成功");
          if(data.key!=""){
             $('#key').val(data.key);
          }
          data.data.forEach(function(val){
            $("#tables").append("<tr><td>"+val.id+"</td><td>"+val.name+"</td></tr>");
          });
          $('#pageToolbar').Paging({ pagesize: data.pagesize, count: data.count, toolbar: true, hash: true ,changePagesize:function(ps,page,){
            pageResult["key"]= $('#key').val();
              pageResult["current"]= page;
              pageResult["pagesize"]= ps;
              $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "http://localhost:8081/page",
                data: JSON.stringify(pageResult),
                success: function (data) {
                  if (data.status == "success") {
                    if (data.key != "") {
                      $('#key').val(data.key);
                    }
                    $("#tables").html("");
                    data.data.forEach(function(val){
                      $("#tables").append("<tr><td>"+val.id+"</td><td>"+val.name+"</td></tr>");
                    });
                  }
                }
              });
            },pageSizeList:[10,20,30,50,100]
              ,callback:function(page,size){
              pageResult["key"]= $('#key').val();
              pageResult["current"]= page;
              pageResult["pagesize"]= size;
              console.log(pageResult);
              $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "http://localhost:8081/page",
                data: JSON.stringify(pageResult),
                success: function (data) {
                  if (data.status == "success") {
                    if (data.key != "") {
                      $('#key').val(data.key);
                    }
                    $("#tables").html("");
                    data.data.forEach(function(val){
                      $("#tables").append("<tr><td>"+val.id+"</td><td>"+val.name+"</td></tr>");
                    });
                  }
                }
              });
              //

            }});

        } else {
          alert("登录失败，原因为" + data.data.errMsg);
        }
      },
      fail: function (data) {
        alert("登录失败，原因为" + data.responseText);
      }
    });

  }


</script>
</body>
</html>